<!--
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8" %>
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>Welcome to register!</title>
	<link href="../CSS/default.css" rel="stylesheet" type="text/css" />
	<!--必要样式-->
	<link href="../CSS/styles.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/demo.css" rel="stylesheet" type="text/css" />
	<link href="../CSS/loaders.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 登录板块 -->
<div class='register'>
	<!-- 板块标题 -->
	<div class='register_title'>
		<span>User Register</span>
	</div>
	<!-- 板块内容 -->
	<div class='register_fields'>
		<!-- 输入用户名 -->
		<div class='register_fields__user'>
			<div class='icon'>
				<img alt="" src='../image/user_icon_copy.png'>
			</div>
			<input name="register" placeholder='UserName' maxlength="16" type='text' autocomplete="off"/>
			<div class='validation'>
				<img alt="" src='../image/tick.png'>
			</div>
		</div>
		<!-- 输入密码 -->
		<div class='register_fields__password'>
			<div class='icon'>
				<img alt="" src='../image/lock_icon_copy.png'>
			</div>
			<input name="pwd" placeholder='Password' maxlength="6" type='text' autocomplete="off">
			<div class='validation'>
				<img alt="" src='../image/tick.png'>
			</div>
		</div>
		<!-- 确认密码 -->
		<div class='register_fields__confirmpassword'>
			<div class='icon'>
				<img alt="" src='../image/lock_icon_copy.png'>
			</div>
			<input name="pwd" placeholder='Confirm Password' maxlength="6" type='text' autocomplete="off">
			<div class='validation'>
				<img alt="" src='../image/tick.png'>
			</div>
		</div>
		<!-- 输入电子邮箱 -->
		<div class='register_fields__email'>
			<div class='icon'>
				<img alt="" src='../image/email.png'>
			</div>
			<input type="email" name="email" placeholder='Email' autocomplete="off">
			<div class='validation'>
				<img alt="" src='../image/tick.png'>
			</div>
		</div>
		<!-- 输入验证码 -->
		<div class='register_fields__password'>
			<div class='icon'>
				<img alt="" src='../image/key.png'>
			</div>
			<input name="code" placeholder='VerificationCode' maxlength="4" type='text' name="ValidateNum" autocomplete="off">
		</div>
		<!-- 注册按钮 -->
		<a href="login.html" target="_self">
			<div class="register_fields__submit2" style="padding-left: 0px;padding-right: 0px;width: 170px;">
				<!-- <a href="register.html" type=love"button">注册</a> -->
				<input type="button" value="Register" required>
			</div>
		</a>
		<!-- 发送验证码按钮 -->
		<div class="send_validation_button_in_register" style="padding-left: 0px;padding-right: 0px;width: 170px;">
			<input type="button" value="Send" required>
		</div>
		<!-- 返回登录界面 -->
		<div class='return_to_login'>
			<a href="login.html">ReturnToLogin</a>
		</div>
<!--		&lt;!&ndash; 忘记密码 &ndash;&gt;
<%&#45;&#45;		<div class='forget_pwd2'>&#45;&#45;%>
<%&#45;&#45;			<a href="forgetpwd.html">ForgetPwd?</a>&#45;&#45;%>
<%&#45;&#45;		</div>&#45;&#45;%>-->
	</div>
</div>

<link href="../layui/css/layui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../JS/jquery.min.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.min.js"></script>
<script type="text/javascript" src='../JS/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../JS/Particleground.js"></script>
<script type="text/javascript" src="../JS/Treatment.js"></script>
<script type="text/javascript" src="../JS/jquery.mockjax.js"></script>
<script type="text/javascript">

	var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持

	// 展示背景
	function showCheck(a) {
		CodeVal = a;
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");
		ctx.clearRect(0, 0, 1000, 1000);
		ctx.font = "80px 'Hiragino Sans GB'";
		ctx.fillStyle = "#E8DFE8";
		ctx.fillText(a, 0, 100);
	}

	// 回车键事件
	$(document).keypress(function (e) {
		if (e.which == 13) {
			$('input[type="button"]').click();
		}
	});

	//粒子背景特效
	$('body').particleground({
		dotColor: '#E8DFE8',
		lineColor: '#133b88'
	});

	// 鼠标点击文本框是进行图片聚焦
	$('input[type="text"]').focus(function () {
		$(this).prev().animate({ 'opacity': '1' }, 200);
	});
	$('input[type="email"]').focus(function () {
		$(this).prev().animate({ 'opacity': '1' }, 200);
	});

	// 后面离子跟随鼠标移动特效
	$('input[name="register"],input[name="pwd"]').keyup(function () {
				var Len = $(this).val().length;
				if (!$(this).val() == '' &amp;&amp; Len >= 5) {
					$(this).next().animate({
						'opacity': '1',
						'right': '30'
					}, 200);
				} else {
					$(this).next().animate({
						'opacity': '0',
						'right': '20'
					}, 200);
				}
			}
	);
</script>

</body>
</html>

